<script>

    var head = new Vue({
        el: '#header',
        data: {
            res: 0,
            username:"",
            role:"",
            user:{}
        },
        created: function () {
            $.ajax({
                type:"GET",
                url:"/checklogin",
                datatype:"json",
                success:function (reuslt){
                    if(reuslt.res==1){
                        head.res = 1;
                        head.username = reuslt.msg;
                        head.role=reuslt.data;
                    }
                }
            })
        },
        methods:{
            openmodal:function () {
                $.ajax({
                    type: "GET",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/page/user/getUserInformation",//url
                    success:function (reuslt){
                        head.user=reuslt.data;
                        console.log(reuslt.data);
                        $('#userinformation').modal('show');
                    },
                    error:function () {
                        alert("异常");
                    }
                });
                $('#userinformation').modal('show');
            }
        }
    });


</script>
<style type="text/css">
    .logo{
        padding-left: 100px;
    }

    .logo span {
        font-size: 50px;
        color: #A2A2A2;
        display: inline-block;
        position: absolute;
        top: 10px;
    }
    .motto {
        padding-left: 20px;
        margin-top: 27px;
    }

    .login{
        text-align: right;
        font-size: 16px;
        color: #A2A2A2;
        padding-right: 50px;
        margin-top: 35px;
    }
    .phone {
        padding-left:18px ;
        background:  url("../../static/imgs/top-tel.jpg") left center no-repeat;
    }
    .login a {
        font-size: 16px;
        color: #A2A2A2;
    }
    .login a:link{color: #A2A2A2}		/* 未访问的链接 */
    .login a:visited {color: #A2A2A2}	/* 已访问的链接 */
    .login a:hover {color: #A2A2A2}	/* 鼠标移动到链接上 */
    .login a:active {color: #A2A2A2}

    .loginuser{
        padding-left:35px;
        display: inline-block;
        font-size: 20px;
        background:url("../../static/imgs/headphoto.jpg") no-repeat;
        height: 35px;
        padding-top: 16px;
    }
</style>
<div class="container-fluid" id="header">
    <!--header-->
    <div class="row">
        <div class="col-sm-8 logo">
            <img src="/static/imgs/logo.png">
            <!--</div>-->
            <!--<div class="col-lg-5 motto">-->

            <span>|</span>
            <img src="/static/imgs/motto.png" class="motto">
        </div>
        <div class="col-sm-4  login">
            <a>联系我们</a>|
            <a class="phone">
                400-885-2225
            </a>|
            <span v-if="res===0">
                <a href="login.html">登陆</a>|
                <a href="regist.html">注册</a>
            </span>
            <span v-else>
                <span  class='dropdown'>
                    <a class='loginuser dropdown-toggle' data-toggle='dropdown' id='user'>
                        {{username}}
                    </a>
                    <ul class='dropdown-menu'style='left: -80px;text-align: left'>
                        <li><a href="/index.html">首页</a></li>
                        <li><a href="/page/admin/admin.html" v-if="role==='admin'">管理员页面</a></li>
                        <li><a href="/page/teacher/examinationmodify.html" v-if="role==='admin'||rele==='teacher'">教师页面</a></li>
                        <li class="divider"></li>
                        <li><a href="javasrcipt:void(0)" v-on:click="openmodal()">我的信息</a></li>
                        <li class="divider"></li>
                        <li><a href="/logout" v-on:click="res=0">退出</a></li>
                        </ul></span>
            </span>
        </div>
    </div>
    <div class="modal fade" id="userinformation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <form id="form2">
                        <input type="hidden" name="id" value="{{user.id}}">
                        <div class="form-group">
                            <label for="name-input">Name</label>
                            <input type="text" class="form-control" id="name-input" value="{{user.name}}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="name-email">Email</label>
                            <input type="email" class="form-control" id="name-email" value="{{user.email}}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label for="role-input">Role</label>
                            <input type="email" class="form-control" id="role-input" value="{{user.role}}" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <label  for="state-input">State</label>
                            <input type="email" class="form-control" id="state-input" value="{{user.state}}" readonly="readonly">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>